<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('distributedEnter.scanRecord')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="distributed">
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolower">
					<view class="record-card" v-for="(item, index) in data.list"
						:key="`${item.materialCode}` + `${index}`">
						<!-- <uni-icons class="close-icons" type="closeempty" color="#9C9C9C" size="30" @click="handelClosePopup(index)"></uni-icons> -->
						<view class="card-mini-head">
							<view class="title-line"></view>
							<text>{{ $t('translationImage.serialNumber') }}：{{ index + 1 }}</text>
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.barcode') }}：</text> {{ item.barcode }}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.materialCode') }}：</text> {{
								item.materialCode }}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.materialName') }}：</text>{{
								item.materialName }}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.materialSpec') }}：</text>{{
								item.materialSpec || '' }}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('stockManage.materialUnit') }}：</text>{{ item.unit }}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('JsInternational.ofStock') }}：</text>{{ item.stockQty }}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('pageTranslation.realInventoryQty') }}：</text>{{
								item.checkQty }}
						</view>
					</view>
					<view v-if="data.noticeHooks" class="noticeHooks">
						{{ data.list.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without') }}
					</view>
				</scroll-view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
import {getCheckBarcodeByHIdForPda} from '@/api/api.js'
import { basPdaOperationLogFn } from '@/utils/index.js';
import { OPERATION_LOOK } from '@/constant/index.js'
import {
	reactive,
	onMounted
} from 'vue';
// 接受来自父组件的传参 页面传值
const props = defineProps({
	id: String,
});
onMounted(() => {
	requestData()
})
let fromData = reactive({
	page: 1,
	rows: 10,
});
let data = reactive({
	list: [],
	id: props.id, // 界面传值的id
	noticeHooks: false, //暂无相关数据标识
})
//上拉加载
const scrolltolower = () => {
	// data.noticeHooks  上拉的时候已经没有数据  不请求接口
	if (!data.noticeHooks) {
		fromData.page++
		requestData()
	}
}
// 拉去当前盘点数据
const requestData = () => {
	let parmes = {
		current: fromData.page,
		size: fromData.rows,
		masterId: data.id // 盘点单ID
	}
	getCheckBarcodeByHIdForPda(parmes).then(res => {
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '盘点'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.code,//返回状态
				errorMessage: res.msg,//错误信息
				isPass: res.code == 0 ? 'Y' : 'N',//是否成功 Y N
				operationType: OPERATION_LOOK,
				module: 'WMS',
				source: "PDA",
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		console.log(res)
		if (res.code == 0) {
			data.noticeHooks = false
			// 根据接口返回设计上拉加载相应判断
			// res.data.rows.length == 0  当前请求第一页数据 如果为空 直接暂时相关数据
			if (fromData.page === 1) {
				if (res.data.records.length == 0) {
					data.noticeHooks = true
				}
				data.list = res.data.records
				// if(data.list.length == res.data.total){
				//     data.noticeHooks = true
				// }
			} else {
				// data.list.length == res.data.total  当前数组数量  等于 接口返回的总数量  代表已无数据
				data.list = [...data.list, ...res.data.records]
			}
			data.noticeHooks = data.list.length >= res.data.total
		} else {
			uni.showToast({ title: res.msg, icon: "none" });
		}
	})
}

</script>

<style lang="scss" scoped>
.scroll {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

.noticeHooks {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	font-size: 32rpx;
	color: #999;
}

.distributed {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
	// height: 100vh;
	position: relative;
}
</style>
